<template>
  <div class="login">
    <div class="login__wrapper">
      首页
      <a-button type="primary">
        Primary
      </a-button>
       <a-button>Default</a-button>
        <a-button type="dashed">
          Dashed
        </a-button>
        <a-button type="danger">
          Danger
        </a-button>
        <a-config-provider :auto-insert-space-in-button="false">
          <a-button type="primary">
            按钮
          </a-button>
        </a-config-provider>
        <a-button type="primary">
          按钮
        </a-button>
        <a-button type="link">
          Link
        </a-button>
    </div>
  </div>
</template>

<script>
// import md5 from 'md5';
import text from '@/assets/js/text';
// 菜单配置项,作为参考
import menu from './menu';

export default {
  name: 'Login',
  data() {
    return {
      text,
      loginName: '',
      password: '',
      captcha: '',
      checked: false,
      loading: false,
      visible: false,
      redirect: this.$route.query.redirect,
      uuid: '',
      captchaImg: '',
    };
  },
  mounted() { // 最近登录账户保存
    const account = localStorage.getItem(window.btoa('account'));
    if (account) {
      this.account = window.atob(account);
    }
    this.getCaptcha();
  },
  methods: {
    onChange(e) {
      this.checked = e.target.checked;
    },
    // 获取图形验证码
    getCaptcha() {
      this.uuid = this.$utils.randomString(12);
      this.$store.dispatch('fetchData', {
        method: 'GET',
        router: `/admin/auth/captcha/${this.uuid}`,
      }).then((res) => {
        if (res.code === '00000') {
          this.captchaImg = res.data.captcha;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    forgetPass() {
      this.$message.warning('请联系管理员');
    },
    showAgreement() {
      this.visible = true;
    },
    login() {
      if (this.loginName === '') {
        this.$message.error('请输入账号');
      } else if (this.password === '') {
        this.$message.error('请输入密码');
      } else if (this.captcha === '') {
        this.$message.error('请输入验证码');
      } else if (!this.checked) {
        this.$message.error('未勾选用户协议');
      } else {
        this.loading = true;
        this.$store.dispatch('fetchData', {
          method: 'POST',
          router: '/admin/auth/login',
          condition: {
            password: this.password,
            loginName: this.loginName,
            uuid: this.uuid,
            captcha: this.captcha,
          },
        }).then((res) => {
          this.getCaptcha();
          if (res.code === '00000') {
            this.afterLogin(res);
          } else {
            this.$message.error(res.msg);
            this.loading = false;
          }
        }).catch(() => {
          this.loading = false;
          this.getCaptcha();
        });
      }
    },
    getPermissionList(elements, permissionList) { // 获取权限列表
      elements.forEach((element) => {
        if (element.type === 10) {
          permissionList.push(element.path);
        }
        if (element.children) {
          this.getPermissionList(element.children, permissionList);
        }
      });
    },
    afterLogin() {
      const elements = menu;
      const naviItems = [];
      elements.forEach((element) => {
        const temp = {
          key: String(element.key),
          title: element.title,
          icon: element.icon,
          hidden: element.hidden,
        };

        const tempEle = [];
        if (element.children) {
          element.children.forEach((item) => {
            tempEle.push({
              key: `${element.key}.${item.key}`,
              title: item.title,
              path: item.path,
              hidden: item.hidden,
            });
          });
        }
        if (!element.children) {
          temp.path = element.path;
        } else {
          temp.children = tempEle;
        }
        naviItems.push(temp);
        // }
      });
      // console.log(naviItems);
      this.$store.commit('setNaviItems', naviItems);
      localStorage.setItem(window.btoa('account'), window.btoa(this.account));
      this.$store.commit('setOpenPages', []); // 先清空打开页面列表

      // 第一个不是hidden菜单的索引
      let theFirstNoHideMenuIndex = null;
      for (let index = 0; index < naviItems.length; index += 1) {
        const item = naviItems[index];
        if (item.hidden === false) {
          theFirstNoHideMenuIndex = index;
          break;
        }
      }
      if (!naviItems[theFirstNoHideMenuIndex].children) {
        const firstNaviItem = naviItems[theFirstNoHideMenuIndex].path.split('/');
        const componentName = firstNaviItem[firstNaviItem.length - 1];
        const { path, title, key } = naviItems[theFirstNoHideMenuIndex];
        this.$store.dispatch('updateOpenPages', {
          path, title, key, componentName,
        });
        this.$store.commit('setOpenKeys', [key]);
        this.$store.commit('setSelectedKeys', [key]);
        // 需要设置一下导航默认打开页面
        if (!this.redirect) {
          this.$router.push(path);
        } else {
          this.$router.push(this.redirect);
        }
      } else if (naviItems[theFirstNoHideMenuIndex].children) { // 有子菜单的菜单
        const firstNaviItem = naviItems[theFirstNoHideMenuIndex].children[0].path.split('/');
        const componentName = firstNaviItem[firstNaviItem.length - 1];
        const { path, title, key } = naviItems[theFirstNoHideMenuIndex].children[0];
        this.$store.dispatch('updateOpenPages', {
          path, title, key, componentName,
        });
        this.$store.commit('setOpenKeys', [naviItems[theFirstNoHideMenuIndex].key]);
        this.$store.commit('setSelectedKeys', [key]);
        // 需要设置一下导航默认打开页面
        if (!this.redirect) {
          this.$router.push(path);
        } else {
          this.$router.push(this.redirect);
        }
      }
      // });
    },
  },
};
</script>

<style lang="stylus">
@import "../assets/css/common.stylus"
</style>
